<!-- 我的 -->
<template>
    <div class="page has-navbar has-tabbar my" v-tabbar-menu-index="3">
        <von-header theme="light">
            <span slot="title">个人资料</span>
        </von-header>
        <div class="page-content" :class="{'blur':codeBtn}">
            <div class="vipMsg">
                <div class="top clearfix">
                    <div class="left img">
                        <img :src="vipData.headImgUrl" alt="">
                    </div>
                    <div class="right">
                        <div class="name" v-text="vipData.name"></div>
                        <div class="number" v-text="vipData.mobile"></div>
                    </div>
                </div>
                <div class="birthday" v-if="showBirthday">生日礼</div>
                <div class="priceAndPointBox">
                    <div class="left pointBox">
                        <!-- <div class="title">积分</div> -->
                        <!-- <div class="num" v-text="vipData.points"></div> -->
                    </div>
                    <div class="left divide" style="width:100%;color:#ffd400;">
                        <!-- <div class="line"></div>  -->
                        会员余额请至店铺进行查看
                    </div>
                    <div class="left priceBox" id="priceBox">
                        <!-- <div class="title">我的余额</div> -->
                        <!-- <div class="num" v-text="'￥'+vipData.amount.toFixed(2)"></div> -->
                    </div>
                </div>
            </div>
            <div class="HSpace1"></div>
            <item class="vipItem" @click.native="enterMyData">
                <span class="left name">个人资料</span>
                <i class="right iconfont icon-dayu"></i>
                <span class="right val" v-text='isComplete?"资料已补全":"请补全资料"'></span>
            </item>
            <item class="vipItem" @click.native="showCode">
                <span class="left name">我的会员号</span>
                <i class="right iconfont icon-dayu"></i>
                <span class="right val" v-text="vipData.code">手机未绑定</span>
            </item>
            <item class="vipItem" @click.native="logout">
                <span class="left name">退出登录</span>
                <i class="right iconfont icon-dayu"></i>
            </item>
        </div>
        
        <!-- 弹出框 -->
        <div class="qrcodebox" v-if="codeBtn" @click="codeBtn=false">
            <img class="inner" id="imgcode" />
        </div>

        <div id="myModalBox" class="modal-backdrop hide">
            <div class="modal-backdrop-bg"></div>
            <div class="modal-wrapper">
                <div id="myModal" class="modal slide-in-up">
                    <div class="bar bar-header bar-dark">
                        <h1 class="title">个人资料</h1>
                        <button class="button button-icon icon ion-ios-close-empty" @click="traggleModal"></button>
                    </div>
                    <div class="page-content">
                        <div class="von-input-wrapper headImgInputWrapper" style="margin-bottom: 0.2rem;">
                            <label class="item item-borderless item-input von-input" for="imgInput">
                                <div class="hairline-top"></div> <span class="input-label">头像</span>
                                <input type="file" accept="image/*" id="imgInput" @change="coverImg($event)">
                                <img v-if="myData.headImgUrl" :src="myData.headImgUrl" alt="" class="img">
                                <div class="hairline-bottom"><i class="iconfont icon-dayu"></i></div>
                            </label> 
                            <span class="input-clear"></span>
                        </div>
                        <div class="von-input-wrapper" style="margin-bottom: 0.2rem;">
                            <label class="item item-borderless item-input von-input">
                                <div class="hairline-top"></div> <span class="input-label">用户名</span>
                                <input type="text" placeholder="请输入用户名" v-model="myData.name">
                                <div class="hairline-bottom"></div>
                            </label> 
                            <span class="input-clear"></span>
                        </div>
                        <div class="von-input-wrapper" style="margin-bottom: 0.2rem;">
                            <label class="item item-borderless item-input von-input">
                                <div class="hairline-top"></div> <span class="input-label">手机号</span>
                                <input type="tel" placeholder="请输入手机号" v-model="myData.mobile">
                                <div class="hairline-bottom"></div>
                            </label> 
                            <span class="input-clear"></span>
                        </div>
                        <div class="dateBox">
                            <div class="dateMask" v-if="isHaveBirthday" @click="printTip"></div>
                            <datepickerC class="dateInput" :value="myData.birthday" label="生日" date-format="yyyy-mm-dd" @input="setBirthday"></datepickerC>
                        </div>
                        <button class="confirmBtn button button-balanced button-dark" @click="upData">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="showSecret" v-if="showSecret" style=""></div>
    </div>
</template>
<script>
import { imgUrl } from './my.js';
import {API_BASE_URL} from "./../../../../urlConfig/index";
export default {
    props: ['openId'],
    data(){
        return {
            vipData: {
                points: 0,
                amount: 0,
            },
            myData: {
                id: '',
                name: '',
                mobile: '',
                headImgUrl: '',
                birthday: ''
            }, // 修改个人资料数据
            isComplete: true,
            codeBtn: false,
            showBirthday: false, // 今天是不是生日
            isHaveBirthday: false,
            coverImgMaxSize: 5*1024*1024, // 图片最大字节数

            clickTime: 0, // 点击次数
            showSecret: false,
        }
    },
    methods: {
        //显示二维码
        showCode(){
            this.codeBtn = true;
            setTimeout((res)=>{
                let code = this.vipData.code;
                JsBarcode("#imgcode", code, {
                    format: "CODE128C",//选择要使用的条形码类型
                    width:3,//设置条之间的宽度
                    height:100,//高度
                    displayValue:true,//是否在条形码下方显示文字
                    text:"456",//覆盖显示的文本
                    fontOptions:"bold",//使文字加粗体或变斜体
                    font:"fantasy",//设置文本的字体
                    textAlign:"center",//设置文本的水平对齐方式
                    textPosition:"top",//设置文本的垂直位置
                    textMargin:5,//设置条形码和文本之间的间距
                    fontSize:40,//设置文本的大小
                    background:"#eee",//设置条形码的背景
                    lineColor:"#444",//设置条和文本的颜色。
                    margin:15//设置条形码周围的空白边距
                })
            },100)
        },
        logout: function () {
            wx.closeWindow();
        },
        traggleModal: function () {
            document.getElementById('myModal').className = 'modal slide-in-up';
            document.getElementById('myModalBox').className = 'modal-backdrop hide';
        },
        enterMyData: function () {
            this.myData = {
                id: this.vipData.id,
                name: this.vipData.name,
                mobile: this.vipData.mobile,
                headImgUrl: this.vipData.headImgUrl,
                birthday: this.vipData.birthday?new Date(this.vipData.birthday).Format('yyyy-MM-dd'):''
            }
            document.getElementById('myModalBox').className = 'modal-backdrop active';
            setTimeout(()=>{
                document.getElementById('myModal').className = 'modal slide-in-up ng-enter ng-enter-active active';
            })
        },
        setBirthday: function ( val ) {
            this.myData.birthday = val;
        },
        //上传照片
        coverImg: function ( e ) {
            let reader = new FileReader();
            let that = this;
            let fileObj = e.target.files[0];
            if( e.target.files.length == 0 ) {
                return false;
            }
            // 判断图片大小
            if( fileObj.size > this.coverImgMaxSize ) {
                $toast.show('上传图片的大小不能超过5MB', 2000).then(() => {})
                return false;
            }
            reader.onload = (function (file) {
                return function (e) {
                    that.$http.post(API_BASE_URL+'v1/image/json/upload', {file: this.result}).then((res)=>{
                        that.myData.headImgUrl = res.data.path; //获得图片的base64的数据
                    }).catch(()=>{
                    });
                };
            })(e.target.files[0]);
            reader.readAsDataURL(e.target.files[0]);
        },
        upData: function () {
            if ( !(/^1[0-9]{1}[0-9]{9}$/.test(this.myData.mobile)) ) {
                $toast.show('请输入正确的手机号', 2000).then(() => {})
                return;
            }
            if ( !this.myData.name ) {
                $toast.show('用户名不能为空', 2000).then(() => {})
                return;
            }

            this.$http.post('/'+this.openId,this.myData).then((res)=>{
                $toast.show('修改成功', 2000).then(() => {})

                this.$http.get('/'+this.openId).then((res)=>{
                    this.vipData = res.data;
                    if ( !this.vipData.headImgUrl || !this.vipData.mobile || !this.vipData.name || !this.vipData.birthday ) {
                        this.isComplete = false;
                    }
                    if ( this.vipData.birthday ) {
                        this.isHaveBirthday = true;
                        let curTimeNum = new Date().getTime();
                        if ( (curTimeNum - this.vipData.birthday) > 0 && (curTimeNum - this.vipData.birthday) < 86400000) {
                            this.showBirthday = true;
                        }
                    }
                    this.vipData.headImgUrl = this.vipData.headImgUrl?this.vipData.headImgUrl:'https://hxypic.oss-cn-hangzhou.aliyuncs.com/image/660e7964-7f08-11e7-b600-15739cd8b3d5/572c190ee0ab456f97da61a233f4818e.jpg';
                })

                this.traggleModal();
            })
        },
        printTip: function () {
            $toast.show('不能更改生日', 2000).then(() => {});
        },
    },
    created: function () {

    },
    mounted(){
        this.$http.get('/'+this.openId).then((res)=>{
            this.vipData = res.data;
            if ( !this.vipData.headImgUrl || !this.vipData.mobile || !this.vipData.name || !this.vipData.birthday ) {
                this.isComplete = false;
            }
            if ( this.vipData.birthday ) {
                this.isHaveBirthday = true;
                let curTimeNum = new Date().getTime();
                if ( (curTimeNum - this.vipData.birthday) > 0 && (curTimeNum - this.vipData.birthday) < 86400000) {
                    this.showBirthday = true;
                }
            }
            this.vipData.headImgUrl = this.vipData.headImgUrl?this.vipData.headImgUrl:'https://hxypic.oss-cn-hangzhou.aliyuncs.com/image/660e7964-7f08-11e7-b600-15739cd8b3d5/572c190ee0ab456f97da61a233f4818e.jpg';
        })

        let clickTime = 0;
        $("input").blur(function(){
            console.log('失去焦点')
            window.scrollTo(0,0);
        });
        /*document.getElementById('priceBox').addEventListener('touchstart', () => {
            if ( clickTime <= 0 ) {
                clickTime++;
                setTimeout(()=>{
                    if ( clickTime >= 10 ) {
                        clickTime = 0;
                        this.showSecret = true;
                        setTimeout(()=>{
                            document.getElementById('showSecret').style.backgroundImage = 'url('+imgUrl.bg+')';
                        })
                        setTimeout(()=>{
                            this.showSecret = false;
                        }, 5000)
                    } else {
                        clickTime = 0;
                    }
                }, 1000);
            } else {
                clickTime++;
            }
        });*/
    },
}
</script>

<style lang="scss" scoped>
	@import "my";
</style>
